
<!--
系统管理-下载中心页面
@author： hejie
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <script th:src="@{static/js/qs.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>

<!--3.div：第3个div开始-->
<!--“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索-->
<div id="app">
    <!--<div id="appso">-->
    <el-row class="demo-autocomplete">
        <el-col :span="2">报表名称</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findDownloadInfo.reportName"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2">创建人</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findDownloadInfo.userInfo_userName"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 创建时间</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findDownloadInfo.createTime"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容:yyyy/MM/dd"
                    :trigger-on-focus="true"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <br/><br/><br/>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findWhenLoad()">查询</el-button>
            <el-button type="primary" icon="el-icon-download" size="small" @click="exportList()">导出</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="dialogFormVisible = true,findAllDataSourceInfo()">新增下载</el-button>
        </el-col>

    </el-row>


    <!--<div id="app">-->
    <!--1.表格-->
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;font-size: 10px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}" >
            <el-table-column
                    prop="reportName"
                    label="报表名称"
                    align="center"
                    width="240">
            </el-table-column>
            <el-table-column
                    prop="status"
                    :formatter="statusFormatter"
                    label="状态"
                    align="center"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="userInfo.userName"
                    label="创建人"
                    align="center"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    align="center"
                    :formatter="dateFormatter"
                    width="190">
            </el-table-column>
            <el-table-column
                    label="操作"
                    prop="fileName"
                    align="center"
                    width="170">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="downloadFile(scope.row)" >下载</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- @size-change：绑定每页数据size，并刷新数据  -->
        <!-- @current-change:绑定当前页码，并刷新数据  -->
        <!--@size-change="handleSizeChange"-->
        <el-pagination
                v-if="!noResult&&!error"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total,prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </template>

    <!--2.操作——“新增下载”，弹出模态框-->
    <el-dialog title="新增下载" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-form-item label="报表名称" :label-width="formLabelWidth">
                <el-input v-model="form.reportName" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择数据" :label-width="formLabelWidth">
                <!--**********-->
                <el-select value-key="id" v-model="form.dataSourceId" placeholder="请选择">
                    <el-option
                            v-for="item in dataSourceInfos"
                            :key="item.id"
                            :label="item.dataSourceName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,newDownload()">确 定</el-button>
        </div>
    </el-dialog>


</div><!--第3个div结束-->

<!--对应第1个div-->
<script type="text/javascript" th:inline="javascript">
    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        demo.findWhenLoad();
    }


    <!--1.div：“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索。table-->
    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    reportName: 'test15520191142015',
                    status: 0,
                    createTime: '2020/12/10'
                }
            ]
        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                tableData: datas.goods,  //  datas数据 中的数组goods
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是查看里面的form表单，以下是表单要修改的内部的字段名
                    reportName:'',//报告名称
                    dataSourceId: ''//数据源的id
                },
                formLabelWidth: '120px',

                // total,
                //搜索的关键字
                findDownloadInfo:{
                    userInfo_userName:null,//创建人的名字
                    // excuteTime:'2020/12/09',//执行时间
                    createTime:null,//创建时间
                    reportName:null//报表名称
                },
                //当前的页码
                currentPage:1,
                total:1,//总页数
                noResult:'',
                error:'',
                //所有的 数据表
                dataSourceInfos:[{
                    id:1,
                    dataSourceName:'角色管理'
                },
                    {
                        id:2,
                        dataSourceName:'系统日志'
                    }],
                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: ''
            };
        },
        methods: {
            //提示：成功的信息message
            success_msg(message) {
                this.$message({
                    message: message,
                    type: 'success'
                });
            },
            //checkbox（为了批量选中，删除）
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

            // 日期格式化
            dateFormatter (row, column) {
                //createTime
                let datetime = row.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            // 禁用状态格式化
            statusFormatter(row, column) {
                let status = row.status;
                if(status == 0){
                    return '失败'
                } else {
                    return '成功'
                }
            },
            //我在pom.xml中引入了“jackson-databind”包
            //点击“导出”，把当前Tabledata通过json方式传递到后端（后端把数据写为一个Excel文件）
            exportList:function (){
                //转换一下，提交转换后的对象
                function TableDataBeanTemp(){};
                let tableDataBeanTemp=new TableDataBeanTemp();
                // tableDataBeanTemp.simpleFileNameUserSet="测试是否可以使用simpleFileNameUserSet";
                tableDataBeanTemp.simpleFileNameUserSet=null;
                tableDataBeanTemp.tableDataJson=demo.tableData;
                let tableDataBean=JSON.stringify(tableDataBeanTemp);

                axios.post([[@{download/exportList}]],tableDataBean,{headers:
                        {'Content-Type':'application/json;'}
                })
            .then((response)=>{
                console.log(response);
                if (response.data.code == 200){
                    demo.success_msg("导出成功，请到系统管理-下载中心进行下载");
                }
            })
                    .catch((err)=>{console.log(err)});
            },

            //查询所有的数据源（是可以展示在前端的table，对应的后端的表）
            findAllDataSourceInfo: ()=>{
                axios.get([[@{dataSource/all}]],{
                    params:{
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    // alert("demo.roleInfos.length="+demo.roleInfos.length);
                    demo.dataSourceInfos.splice(0,demo.dataSourceInfos.length);
                    for(let i=0;i<res.data.length;i++){
                        demo.dataSourceInfos.push(res.data[i]);
                    }
                })
                    .catch(error => {
                        console.log(error);
                    });
            },

            //执行“新增下载”
            newDownload:()=>{
                let params=new FormData();
                params.append("dataSourceId",demo.form.dataSourceId);
                params.append("reportName",demo.form.reportName);
                axios.post([[@{download/newDownload}]] ,params).then(res => {
                    console.log(res);
                    //清除form中填写的数据
                    demo.form.dataSourceId='';
                    demo.form.reportName='';

                    if(res.data.code == 200){
                        demo.success_msg("导出成功，开始下载");
                        //从数组中移除元素
                        // app.rows.splice(index,1);
                        // 在后端，把 文件名+后缀 放到ResultMsg的data中返回，方便：“新增下载”时，能够直接自动开始下载，而不用费力去“下载中心”点击“下载”
                        let filePath=res.data.data;
                        location.href=[[@{files/download?fileName=}]]+filePath;
                    }
                }).catch(function (error) {
                    console.log(error);
                });


            },

            //  这里一点击翻页就会重新去查询数据，所以这里因该是给查询条件赋值，而不是给pagination赋值
            //  后台我们已经将数据分号了页，pagination会自根据后台返回的分页数据给自己的属性变量赋值

            // 当前的页码，改变时会触发
            handleCurrentChange:function (currentPage) {
                demo.currentPage=currentPage;
                demo.findWhenLoad();
            },

            //分页查询数据：把后端的数据，显示在table上   createTimeStr
            findWhenLoad() {
                console.log("in findWhenLoad02");

                let createTimeRaw=this.findDownloadInfo.createTime;
                if (this.findDownloadInfo.createTime==''){
                    createTimeRaw=null;
                }

                console.log("createTimeRaw="+createTimeRaw);
                axios.get([[@{download/page}]],{
                    params:{
                        //搜索的关键字
                        createTime: createTimeRaw,
                            reportName: this.findDownloadInfo.reportName,
                            pageNum : this.currentPage,
                            userInfoUserName:this.findDownloadInfo.userInfo_userName
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    console.log("res="+res);
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    console.log("this.tableData[0].createTime="+this.tableData[0].createTime);
                })
                    .catch(error => {
                        console.log(error);
                    });
            },

            //点击表格中某一行的“下载后”，在 弹出的对话框中填充数据
            downloadFile:(downloadInfo)=>{
                let filePath=downloadInfo.filePath;
                console.log("filePath="+filePath);
                let params =new FormData();
                location.href=[[@{files/download?fileName=}]]+filePath;
            },

            //"查看"的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);
            },
            // del:function(id){
            //     this.tableData.splice(id,1);
            // },
            //删除，点击删除之后，给后台指令，后台回到前端页面刷新页面。
            del: function (id) {
                alert(id);
                this.tableData.splice(id, 1);
                let that = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$http("删除操作的路径名" + id)//“”+接上删除的id值
                        .then(function (respDate) {
                            if (respDate.data == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.toPage(that.currentPage);
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                                that.toPage(that.currentPage);
                            }
                        })
                }).catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'

                    });
                });
            },//删除方法截止


            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "", "address": "天山西路389号"},
                    {"value": "", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },//method方法截止

        //查询所有的角色，用来做<option>
        //查询所有的角色，用来做<option>
        created : function () {

        },
        mounted() {
            this.restaurants = this.loadAll();
        }
        // 局部过滤器，仅针对当前  组件（#app <div>）有效
        /*filters:{
            dateYMDHMSFormat:date=>{
              let d=  new date;
              d.get
                return date.toLocaleLowerCase();
            }
        }*/
    });

    //分页还没写======


</script>



<!--分页？-->
<div id="paging">

</div>




</body>


</html>